<template>
	<view class="profile-page">
		<!-- 顶部导航栏（原生navigator） -->
		<view class="nav-bar">
		</view>

		<!-- 头像与基础信息卡片 -->
		<view class="user-info-card">
			<!-- 头像上传与展示 -->
			<view class="avatar-container">
				<view class="avatar-picker" @click="openAvatarPicker">
					<image :src="userInfo.avatar" class="avatar"></image>
					<view class="avatar-mask">
						<uni-icons type="camera" size="24" color="#FFFFFF"></uni-icons>
						<text class="edit-avatar-tip">更换头像</text>
					</view>
				</view>
			</view>

			<!-- 用户名编辑-->
			<view class="form-item">
				<text class="form-label">用户名</text>
				<input v-model="userInfo.name" placeholder="请输入3-12位字母或数字" class="form-input" maxlength="12"
					@blur="validateName">
				<text v-if="nameError" class="error-tip">{{ nameError }}</text>
			</view>

			<!-- 昵称编辑 -->
			<view class="form-item">
				<text class="form-label">昵称</text>
				<input v-model="userInfo.nickname" placeholder="请输入昵称" class="form-input" maxlength="12">
			</view>

			<!-- 电话编辑 -->
			<view class="form-item">
				<text class="form-label">电话</text>
				<input v-model="userInfo.phone" placeholder="请输入手机号" class="form-input" type="tel" maxlength="11"
					@blur="validatePhone">
				<text v-if="phoneError" class="error-tip">{{ phoneError }}</text>
			</view>

			<!-- 签名编辑（原生textarea） -->
			<view class="form-item form-item-textarea">
				<text class="form-label">签名</text>
				<textarea v-model="userInfo.signature" placeholder="一句话介绍自己" class="form-textarea" maxlength="50"
					rows="2"></textarea>
			</view>
		</view>

		<!-- 保存按钮（原生button） -->
		<button class="save-btn" @click="saveProfile" :disabled="isSaving">
			<text v-if="!isSaving">保存修改</text>
			<text v-else>
				<uni-icons type="spinner-cycle" size="20" color="#FFFFFF" class="loading-icon"></uni-icons>
				保存中...
			</text>
		</button>

		<!-- 头像选择器（原生uni.chooseImage） -->
		<view class="picker-mask" v-if="showPicker" @click="closePicker"></view>

	</view>
</template>

<script>
	import {
		getStorageUser,
		setStorageUser
	} from "@/utils/storage.js";
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					name: "",
					phone: "",
					avatar: "https://picsum.photos/id/64/200/200",
					nickname: "",
					signature: ""
				},
				isSaving: false,
				showPicker: false,
				nameError: "",
				phoneError: "",
				regName: /^[a-z0-9]{3,12}$/i,
				regPhone: /^1[3-9]\d{9}$/
			};
		},

		onLoad() {
			this.initUserInfo();
		},

		watch: {
			userInfo: {
				deep: true,
				handler(newVal) {
					setStorageUser(newVal);
				}
			}
		},

		methods: {
			// 返回上一页
			navBack() {
				uni.navigateBack();
			},

			// 初始化用户信息（本地缓存）
			initUserInfo() {
				const storedUser = getStorageUser() || {};
				uni.showLoading({
					title: "加载中"
				});
				this.userInfo = {
					...this.userInfo,
					...storedUser,
					avatar: storedUser.avatar || this.userInfo.avatar
				};
				uni.hideLoading();
			},

			// 打开头像选择器（原生API）
			openAvatarPicker() {
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: (res) => {
						this.userInfo.avatar = res.tempFilePaths[0];
						uni.showToast({
							title: "头像已预览",
							icon: "success"
						});
					},
					fail: () => {
						uni.showToast({
							title: "未选择图片",
							icon: "none"
						});
					}
				});
			},

			// 用户名校验
			validateName() {
				if (!this.userInfo.name.trim()) {
					this.nameError = "用户名不能为空";
					return false;
				}
				if (!this.regName.test(this.userInfo.name)) {
					this.nameError = "请输入3-12位字母或数字";
					return false;
				}
				this.nameError = "";
				return true;
			},

			// 手机号校验
			validatePhone() {
				if (!this.userInfo.phone.trim()) {
					this.phoneError = "";
					return true;
				}
				if (!this.regPhone.test(this.userInfo.phone)) {
					this.phoneError = "请输入有效的手机号";
					return false;
				}
				this.phoneError = "";
				return true;
			},

			// 保存修改（本地缓存）
			saveProfile() {
				const isNameValid = this.validateName();
				const isPhoneValid = this.validatePhone();

				if (!isNameValid || !isPhoneValid) {
					uni.showToast({
						title: "请完善正确的信息",
						icon: "none"
					});
					return;
				}

				this.isSaving = true;
				setStorageUser(this.userInfo);
				uni.$emit("userInfoUpdated", this.userInfo);
				uni.showToast({
					title: "资料已保存",
					icon: "success"
				});

			}
		}
	};
</script>

<style scoped>
	/* 页面基础样式 */
	.profile-page {
		background-color: #F8F9FA;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 导航栏（自定义原生样式） */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 20rpx;
		background: linear-gradient(90deg, #FF7D00, #FF9F43);
		box-shadow: 0 2rpx 8rpx rgba(255, 125, 0, 0.2);
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.nav-empty {
		width: 60rpx;
	}

	/* 用户信息卡片 */
	.user-info-card {
		background-color: #FFFFFF;
		margin: 30rpx 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	/* 头像区域 */
	.avatar-container {
		display: flex;
		justify-content: center;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.avatar-picker {
		position: relative;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border: 3rpx solid #FF7D00;
		object-fit: cover;
	}

	.avatar-mask {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 0 0 90rpx 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
	}

	.edit-avatar-tip {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	/* 表单项目 */
	.form-item {
		display: flex;
		align-items: center;
		padding: 28rpx 30rpx;
		border-bottom: 1rpx solid #F5F5F5;
		position: relative;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.form-item-textarea {
		align-items: flex-start;
		padding-top: 32rpx;
	}

	.form-label {
		font-size: 30rpx;
		color: #333333;
		width: 140rpx;
	}

	.form-input {
		flex: 1;
		font-size: 30rpx;
		color: #555555;
		padding: 8rpx 0;
	}

	.form-textarea {
		flex: 1;
		font-size: 30rpx;
		color: #555555;
		min-height: 100rpx;
		line-height: 40rpx;
	}

	.error-tip {
		position: absolute;
		right: 30rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #FF4D4F;
	}

	/* 保存按钮 */
	.save-btn {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		padding: 24rpx 0;
		background: linear-gradient(90deg, #FF7D00, #FF9F43);
		color: #FFFFFF;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 6rpx 16rpx rgba(255, 125, 0, 0.3);
		transition: all 0.2s;
	}

	.save-btn[disabled] {
		background: #FFCC80;
		box-shadow: none;
	}

	.save-btn:active {
		transform: scale(0.98);
	}

	.loading-icon {
		margin-right: 8rpx;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>